import React, { useState } from 'react';
import { Form, Input, Typography } from 'antd';
const { Paragraph } = Typography;
const CustomizedForm = ({ onChange, fields }) => (
    <Form
        name="global_state"
        layout="inline"
        fields={fields}
        onFieldsChange={(_, allFields) => {
            onChange(allFields);
        }}
    >
        <Form.Item
            name="username"
            label="Username"
            rules={[
                {
                    required: true,
                    message: 'Username is required!',
                },
            ]}
        >
            <Input />
        </Form.Item>
    </Form>
);
const Form5Data = () => {
    const [fields, setFields] = useState([
        {
            name: ['username'],
            value: 'Ant Design',
        },
    ]);
    return (
        <>
            <div>我是antd5的表单数据组件:</div>
            <CustomizedForm
                fields={fields}
                onChange={(newFields) => {
                    setFields(newFields);
                }}
            />
            <Paragraph
                style={{
                    maxWidth: 440,
                    marginTop: 24,
                }}
            >
                <pre
                    style={{
                        border: 'none',
                    }}
                >
                    {JSON.stringify(fields, null, 2)}
                </pre>
            </Paragraph>
        </>
    );
};
export default Form5Data;